<template>
    <view>
		<u-sticky>
		  <u-navbar back-text=" " title="材料查询" :background="background" title-color="#ffffff" :custom-back="customBack" back-icon-color="#ffffff" ref="navbar" title-size="36"></u-navbar>
		  <xmInfo
		    :projectno="itemContent.projectno"
		    :projectname="itemContent.projectname"
		    ref="xmInfo"
		    class="u-sticky"
		  ></xmInfo>
		</u-sticky>
		<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore" :refresher-enabled="true"
			:refresher-triggered="triggered" @refresherrefresh="refresherrefresh" :style="{ height: computedScrollViewHeight }">
        <!-- <view class="cu-card"> -->
		<view
		    class="scroll-content"
		    ref="scrollContent"
		    style="
		      display: flex;
		      flex-direction: column;
		      justify-content: space-between;
		    "
		    :style="{ height: computedScrollViewHeight  }"
		  >
            <view class="cu-item shadow"  v-for="(item,index) in list" :key="item.id">
				<view class="cu-form-group" style="display: flex; justify-content: space-between">
				  <view  style=" display: inline-block;padding: 5px;background: #3E97B0;color: #fff;width: 40px;text-align: center;font-style: italic;font-weight: bold">
				  	{{ index + 1 }}
				  </view>
				   <view class="text-xl text-bold " style="margin-left: 10px;" >{{ item.mname }}</view>
				</view>
                <!-- <view class="cu-form-group">
                    <view class="text-xl text-bold title">创建时间</view>
                    <view class="text-xl text-bold" style="flex: 1;">{{ item.createtime }}</view>
                </view> -->
				<view class="cu-form-group">
				    <view class="title">物料编码</view>
				    <view >{{ item.mcode }}</view>
				</view>
				<!-- <view class="cu-form-group">
				    <view class="title">物料名称</view>
				    <view >{{ item.mname }}</view>
				</view> -->
				
				<view class="cu-form-group">
				    <view class="title">规格型号</view>
				    <view >{{ item.mstd }}</view>
				</view>
				<view class="cu-form-group">
				    <view class="title">数量</view>
				    <view >{{ item.num }} （{{ item.unit }}）</view>
				</view>
				<!-- <view class="cu-form-group">
				    <view class="title">是否主材</view>
					<view>{{ item.bmain == '1' ? "是" :item.bmain == '0' ? "否":'' }}</view>
				</view> -->
              
               <!-- <view class="cu-form-group">
                    <view class="title">设计变更编码</view>
                    <view style="flex: 1;">{{ item.sno }}</view>
                </view>
                <view class="cu-form-group">
                    <view class="title">分单编码</view>
                    <view style="flex: 1;">{{ item.fdno }}</view>
                </view>
              
				<view class="cu-form-group">
				    <view class="title">数量</view>
				    <view style="flex: 1;">{{ item.num }}</view>
				</view>
				<view class="cu-form-group">
				    <view class="title">单位</view>
				    <view style="flex: 1;">{{ item.unit }}</view>
				</view>
				<view class="cu-form-group">
				    <view class="title">计划数量</view>
				    <view style="flex: 1;">{{ item.useQty }}</view>
				</view>
				 -->
               
            </view>
            
        <!-- </view> -->
		<view v-if="list.length" class="loadmore">
			<u-loadmore :status="loadStatus"></u-loadmore>
		</view>
		<u-empty v-if="!list.length"></u-empty>
		</view>
		</scroll-view>
        
		<view style="height: 80px"></view>
		<view class="btn-group cu-bar foot" style="height: 80px">
		    <button class="cu-btn  shadow-blur"@click="search">
		        <text class="cuIcon-search" style="margin-right: 10px;"> </text> 搜索
		    </button>
		</view>
		<!-- <view class="btn-group cu-bar foot">
		  <button class="cu-btn bg-green shadow-blur" @tap="add()">
		    <text class="cuIcon-add"></text>搜索
		  </button>
		</view> -->
		<!-- 组件 dialog -->
		<customDialog
		  :modalName="modalName"
		  @getModalName="getModalName"
		></customDialog>
    </view>
</template>
<script>
import xmInfo from "@/pages/zfgs/index/componetns/xmInfo.vue";
import customDialog from "./dialog.vue";
  export default{
  components: { xmInfo,customDialog },
    data(){
        return{
			background:{
			  backgroundColor: '#3E97B0',
			},
			scrollViewHeight: 0,
			headerHeight: 0,
			modalName: null,
			triggered: false,
			loadStatus: 'loadmore',
			query: {
				pageNo: 1,
				pageSize: 20,
			},
			itemContent:{},
            imgList: ["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg","http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"],
            list:[]
        }
    },
	onShow() {
		this.query.pageNo = 1;
		this.loadList();
	},
	onLoad(e) {
	  if (typeof e.item !== "undefined") {
	    try {
	      this.itemContent = JSON.parse(e.item);
		 this.query.pcode = this.itemContent.projectno
	      console.log(this.itemContent);
	    } catch (error) {
	      console.error("Failed to parse item:", error);
	    }
	  } else {
	    console.warn("Item is undefined.");
	  }
	},
	mounted() {
	  this.$refs.xmInfo.$on('child-mounted-done', () => {
	    this.calculateScrollViewHeight();
	  });
	},
	computed: {
	  computedScrollViewHeight() {
	    return this.scrollViewHeight === 'auto' ? 'auto' : `${this.scrollViewHeight}px`;
	  },
	},
	
    methods:{
		customBack(){
		  // 跳转到工作台页面
		  // uni.navigateTo({
		  //   url: "/pages/zfgs/index/index/index?item=" + JSON.stringify(this.itemContent),
		  // });
		  uni.navigateBack({
		    delta: 1,
		  });
		},
		async calculateScrollViewHeight() {
		  try {
		// 等待头部高度计算完成
		      await new Promise((resolve) => {
		        this.$nextTick(() => {
		          this.headerHeight = this.$refs.xmInfo.$refs['u-sticky'].height + this.$refs.xmInfo.$refs['u-sticky'].h5NavHeight + this.$refs.navbar.navbarHeight;
		          resolve();
		        });
		      });
		      // 计算tabBar高度
		//       if(this.status != this.vuex_config.zgStatus){
		//         this.tabBarHeight = 90;
		//       }else{
		//         this.tabBarHeight = 0;
		//       }
		this.tabBarHeight = 0
		      // 获取屏幕高度
		      const systemInfo = uni.getSystemInfoSync();
		      const screenHeight = systemInfo.windowHeight;
		      // 计算scroll-view高度
		      this.scrollViewHeight = screenHeight - (this.headerHeight + this.tabBarHeight);
		  } catch (error) {
		    console.error('Error while calculating ScrollView height:', error);
		  }
		},
		search() {
		  this.modalName = "DrawerModalR";
		  // 隐藏tabbar
		  uni.hideTabBar();
		},
		getModalName(item) {
		  console.log(item, "getModalName===");
		  const { modalName, query } = item;
		  this.modalName = modalName;
		  this.query = query;
		  this.query.pageNo = 1;
		  this.query.pageSize = 20;
		  this.query.pcode = this.itemContent.projectno
		  // if(this.query.projStatus == 0){
		  //   this.current = 0
		  // }else if(this.query.projStatus == 1 || this.query.projStatus == 3 || this.query.projStatus == 4|| this.query.projStatus == 5 || this.query.projStatus == 6 || this.query.projStatus == 7 ){
		  //   this.current = 4
		  // }
		  // console.log(this.query.projStatus ,'this.query.projStatus',this.current)
		  this.loadList();
		},
		async refresherrefresh() {
			console.log(22222);
			this.triggered = true
			this.query.pageNo = 1;
			await this.loadList()
			this.triggered = false
		},
		loadList(type) {
			this.$u.api.zfgs.pmMaterialListData(this.query).then(res => {
				if (res.list.length < 20 || res.list.length == 0) {
					this.loadStatus = "nomore";
				}
				var list = res.list;
				if (type == "add") {
					for (var i = 0; i < list.length; i++) {
						this.list.push(list[i])
					}
				} else {
					this.list = list;
				}
			})
		
		},
		loadMore() {
			this.loadStatus = "loading";
			setTimeout(() => {
				this.query.pageNo += 1;
				this.loadList("add");
			}, 100);
		},
		
        add(item){
            console.log(item,'item')
            if(item){
                uni.navigateTo({
                    url: '/pages/zfgs/proj/zg/pmRectification/form?id='+item.id
                })
            }else{
                uni.navigateTo({
                    url: '/pages/zfgs/proj/zg/pmRectification/form?projectno='+this.itemContent.projectno + '&name='+this.itemContent.projectname + "&id=''"
                })
            }
        },
        ViewImage(imageList,e) {
            // 阻止冒泡
            const url = imageList.map(item => item.url);
            e.stopPropagation();
            uni.previewImage({
                urls: url,
                current: e.currentTarget.dataset.url
            });
        },
    }
  }

</script>
<style lang="scss" scoped>
	/deep/ .u-progress.data-v-0d33af60 {
		display: none;
	}
	// /deep/.u-input__input.data-v-460c1d26 {
	//     text-align: right;
	// }
	.title {
	  width: 150px;
	}
.cu-btn {
  font-size: 16px;
  height: 40px;
}
.foot{
    background: #fff;
}
.cu-item{
  flex-wrap: wrap;
  padding: 15px !important;
}
.title{
    flex-shrink: 0;
}
.grid-square{
    margin-bottom: 0 !important;
}
// ::v-deep .u-input__input{
// 	text-align: right;
// }
</style>